<template>
    <div class="menu-manager-wrap">
        <el-table :data="model.menus" border max-height="400">
            <el-table-column
                prop="id" 
                label="id" 
                type="selection"
                fixed></el-table-column >
            <el-table-tree-column  
                fixed
                :expand-all="!!!1"
                :remote="remote"
                file-icon="icon icon-file" 
                folder-icon="icon icon-folder" 
                prop="label" 
                label="名称" 
                :show-overflow-tooltip="true" 
                width="180">
                <template scope="scope" >
                    <span @click="text(scope)">{{scope.row.label}}</span>  
                </template>
            </el-table-tree-column>
            <el-table-column 
                prop="link" 
                label="链接" 
                width="180"
            ></el-table-column>
            <el-table-column 
                prop="weight" 
                label="权重" 
                width="50"
            ></el-table-column>
            <el-table-column 
                prop="show" 
                label="可见" 
                width="50"
            ></el-table-column>
            <el-table-column 
                prop="show" 
                label="权限标识" 
                width="180"
            ></el-table-column>
            <el-table-column
          label="操作"
          fixed="right"
          width="200">
          <template slot-scope="scope">
            <el-button-group>
              <el-button
                size="mini" icon="el-icon-view"
              ></el-button>
            <el-button
              size="mini" icon="el-icon-edit" type="primary"
              ></el-button>
            <el-button
              size="mini"
              type="danger" icon="el-icon-delete"
              ></el-button>
            </el-button-group>
          </template>
        </el-table-column>

        </el-table>
    </div>
</template>

<script>
import Vue from 'vue'
import ElTableTreeColumn from  'element-tree-grid/src/index.js'
    export default {
        name: 'HelloWorld',
        data() {
            return {
                msg: 'Welcome to Your Vue.js App',
                model: {
                    menus: []
                }
            }
        },
        components:{
            'el-table-tree-column':ElTableTreeColumn
        },
        created () {
          let that = this;
          this.$ajax.get('/api/system/menuList').then(function(res){
            that.model.menus = res.data;
          });
        },
        methods:{
            remote(row,callback){
                setTimeout(function() {
                    callback(row.children)
                },500)
            }
        }
    }
</script>
